<template>
    
  <el-dialog v-model="visible" title="地址簿" width="500px" @update:model-value="handleVisibleChange">
    <el-table 
      :data="addressBookList" 
      style="width: 100%" 
      height="300" 
      highlight-current-row 
      @row-click="selectAddress"
    >
      <el-table-column prop="name" label="姓名" min-width="80" />
      <el-table-column prop="phone" label="电话" min-width="120" />
      <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleClose">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface AddressItem {
  id: number
  name: string
  phone: string
  region: string[]
  address: string
}

const props = defineProps<{
  modelValue: boolean
  addressBookList: AddressItem[]
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'selectAddress': [address: AddressItem]
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const selectAddress = (row: AddressItem) => {
  emit('selectAddress', row)
  handleClose()
}

const handleVisibleChange = (value: boolean) => {
  emit('update:modelValue', value)
}

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>